{% load i18n %}

<div id="variants">
    <h2>{% trans 'Property Groups' %}</h2>
    <form action="{% url lfs_update_product_property_groups product.id %}"
          method="post">
        {% csrf_token %}
        <select name="selected-property-groups"
                multiple="multiple">
            {% for property_group in shop_property_groups %}
                <option value="{{ property_group.id }}"
                        {% if property_group.selected %}selected="selected"{% endif %}>
                    {{ property_group.name }}
                </option>
            {% endfor %}
        </select>
        <div class="buttons">
            <input type="submit"
                   class="button"
                   value="{% trans 'Update property groups' %}">
        </div>
    </form>

    <h2 class="heading-middle">{% trans 'Local properties' %}
        <a href="" class="discreet property-edit-mode">
            <img src="{{ STATIC_URL }}icons/pencil.png"
                 alt="{% trans 'Edit' %}"
                 title="{% trans 'Edit variant' %}" />
        </a>
    </h2>
    <form id="property-add-form"
          class="property-edit-field"
          action="{% url lfs_manage_add_property product.id %}"
          method="post">
        {{ property_form.name }}
        <input class="ajax-save-button"
               type="submit"
               value="{% trans 'Add property' %}" />
    </form>

    {% for property in local_properties %}
        <div style="font-weight:bold">{{ property.name }}</div>
        {% if not forloop.first %}
            <a href="{% url lfs_manage_change_property_position %}?product_id={{ product.id }}&amp;property_id={{ property.id }}&amp;direction=up"
               class="ajax-link property-edit-field">
                <image src="{{ STATIC_URL }}icons/arrow_up.png"
                       alt="{% trans 'Up' %}"
                       title="{% trans 'Up' %}"/>

            </a>
        {% endif %}
        {% if not forloop.last %}
            <a href="{% url lfs_manage_change_property_position %}?product_id={{ product.id }}&amp;property_id={{ property.id }}&amp;direction=down"
                    class="ajax-link property-edit-field">
                <image src="{{ STATIC_URL }}icons/arrow_down.png"
                       alt="{% trans 'Down' %}"
                       title="{% trans 'Down' %}"/>
            </a>
        {% endif %}

        <a href="{% url lfs_manage_delete_property product.id property.id %}"
           class="delete-link property-edit-field"
           dialog_message="{% trans 'Do you really want to delete this property and all its options?' %}"
           dialog_yes_button_class="ajax-save-button">
            <image src="{{ STATIC_URL }}icons/cross.png"
                   alt="delete"
                   title="{% trans 'Delete property' %}"/>
        </a>
        <div class="property-options">
            {% for option in property.options.all %}
                <div>
                    {{ option.name }}
                    <a href="{% url lfs_manage_delete_property_option product.id option.id %}"
                       class="delete-link property-edit-field"
                       dialog_message="{% trans 'Do you really want to delete this option?' %}"
                       dialog_yes_button_class="ajax-save-button">
                        <image src="{{ STATIC_URL }}icons/cross.png"
                               alt="delete"
                               title="{% trans 'Delete option' %}"/>

                    </a>
                </div>
            {% endfor %}
            <div class="property-edit-field">
                <form action="{% url lfs_manage_add_property_option product.id %}"
                      method="post">
                    {{ property_option_form.name }}
                    <input type="hidden" name="property_id" value="{{ property.id }}" />
                    <input type="submit"
                           class="ajax-save-button"
                           value="{% trans 'Add option' %}" />
                </form>
            </div>
        </div>
    {% endfor %}

    <h2 class="heading-middle">{% trans 'Variants' %}</h2>
    <form action="{% url lfs_manage_add_variants product.id %}"
          class="variants-add-form"
          method="post">
        <table>
            <tr>
                <th>
                    {% trans 'Slug' %}
                </th>
                <th>
                    {% trans 'Name' %}
                </th>
                <th>
                    {% trans 'Price' %}
                </th>
                {% for property in all_properties %}
                    <th>
                        {{ property.name }}
                    </th>
                {% endfor %}
                <th></th>
            </tr>
            <tr>
                <td>
                    {{ variant_simple_form.slug }}
                </td>
                <td>
                    {{ variant_simple_form.name }}
                </td>
                <td>
                    {{ variant_simple_form.price }}
                </td>
                {% for property in all_properties %}
                    <td>
                        <select name="property_{{ property.id }}">
                            <option value="all">{% trans 'All' %}</option>
                            {% for option in property.options.all %}
                                <option value="{{ option.id }}">
                                    {{ option.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </td>
                {% endfor %}
                <td>
                    <input type="submit"
                           value="{% trans 'Add variant(s)' %}"
                           class="ajax-save-button" />
                </td>
            </tr>
        </table>
    </form>

    {% if variants %}
        <form id="variants-form"
              action="{% url lfs_manage_update_variants product.id %}"
              method="post">
            <table>
                <th>
                    <input type="checkbox" class="select-all" value="delete" />
                </th>
                <th>
                    {% trans 'Pos.' %}
                </th>
                <th>
                    <input type="checkbox" class="select-all" value="active" />
                    {% trans 'Active' %}
                </th>
                <th>
                    {% trans 'URL' %}
                </th>
                <th>
                    <input type="checkbox" class="select-all" value="active_sku" />
                    {% trans 'SKU' %}
                </th>
                <th>
                    <input type="checkbox" class="select-all" value="active_name" />
                    {% trans 'Name' %}
                </th>
                {% for property in all_properties %}
                    <th>
                        {{ property.name }}
                    </th>
                {% endfor %}
                <th colspan="2">
                    <input type="checkbox"
                           class="select-all"
                           value="price" />
                    {% trans 'Price' %}
                </th>
                <th>
                    {% trans 'Default' %}
                </th>
                {% for variant in variants %}
                    <tr>
                        <td>
                            <input type="hidden" name="variant-{{ variant.id }}" />
                            <input type="checkbox" class="select-delete" name="delete-{{ variant.id }}" />
                        </td>
                        <td>
                            <input type="text" name="position-{{ variant.id }}" value="{{ variant.position }}" size="3" />
                        </td>
                        <td>
                            <input type="checkbox" class="select-active" name="active-{{ variant.id }}" {% if variant.active %}checked="checked"{% endif %} />
                        </td>
                        <td>
                            <input type="text" name="slug-{{ variant.id }}" value="{{ variant.slug }}" />
                        </td>
                        <td>
                            <input type="checkbox" class="select-active_sku" name="active_sku-{{ variant.id }}" {% if variant.active_sku %}checked="checked"{% endif %} />
                            <input type="text" name="sku-{{ variant.id }}" value="{{ variant.sku }}" />
                        </td>
                        <td>
                            <input type="checkbox" class="select-active_name" name="active_name-{{ variant.id }}" {% if variant.active_name %}checked="checked"{% endif %} />
                            <input type="text" name="name-{{ variant.id }}" value="{{ variant.name }}" />
                        </td>

                        {% for property in variant.properties %}
                            <td>
                                <select name="property-{{ variant.id }}|{{ property.id }}">
                                    {% for option in property.options %}
                                        <option value="{{ option.id }}"
                                                {% if option.selected %}selected="selected"{% endif %}>
                                            {{ option.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </td>
                        {% endfor %}
                        <td>
                            <input type="checkbox" class="select-price" name="active_price-{{ variant.id }}" {% if variant.active_price %}checked="checked"{% endif %} />
                        </td>
                        <td class="number">
                            <input class="number" type="text" name="price-{{ variant.id }}" value="{{ variant.price }}" />
                        </td>
                        <td>
                            <input type="radio" name="default_variant" value="{{ variant.id }}" {% if product.default_variant.id == variant.id %}checked="checked"{% endif %} />
                        </td>
                        <td>
                            <a href="{% url lfs_manage_product variant.id %}">
                                <img src="{{ STATIC_URL }}icons/pencil.png"
                                     alt="Edit"
                                     title="{% trans 'Edit variant' %}" />
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </table>
            <div class="buttons">
                <input type="submit" name="delete" class="button ajax-save-button" value="{% trans 'Delete' %}" />
                <input type="submit" name="update" class="button ajax-save-button" value="{% trans 'Save' %}" />
            </div>
        </form>

        <h2 class="heading-middle">{% trans 'Category variant' %}</h2>
        <form action="{% url lfs_update_category_variant product.id %}"
              method="post">
            <div class="label">
                {{ category_variant_form.category_variant.label_tag }}:
            </div>
            <div>
                {{ category_variant_form.category_variant }}
            </div>
            <div class="buttons">
                <input type="submit"
                       value="{% trans 'Change category variant' %}"
                       class="button ajax-save-button" />
            </div>
        </form>

        <h2 class="heading-middle">{% trans 'Display type' %}</h2>
        <form action="{% url lfs_manage_edit_sub_type product.id %}"
              method="post">
            <div class="label">
                {{ display_type_form.variants_display_type.label_tag }}:
            </div>
            <div>
                {{ display_type_form.variants_display_type }}
            </div>
            <div class="buttons">
                <input type="submit"
                       value="{% trans 'Change variant display type' %}"
                       class="button ajax-save-button" />
            </div>
        </form>
    {% endif %}
</div>
<script>
    var em = $.cookie("property-edit-mode");
    if (em == "true") {
        $(".property-edit-field").show();
    }
    else {
        $(".property-edit-field").hide();
    }
</script>
